<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-23 21:14:13
 * @LastEditors: cxguo
 * @LastEditTime: 2019-10-26 13:59:40
 -->
<template>
  <div>
    <!-- 当前MoveItem: {{ d.movingObj.index }} <br>
    item顺序: {{ insideColDataMsg }} -->
    <div class="wrapper">
      <div class="hasShowCol" style="height:160px;">
        <b>已显示字段: </b> <span>( 拖动可调整字段顺序 )</span>
        <ul class="col clearfix">
          <li
            v-for="(col, index) in insideColData"
            :key="`${col.dataIndex}`"
            :data-index="`${index}`"
            :style="`left:${getItemLeft(col.positionIndex)}px; top:${getItemTop(col.positionIndex)}px; width:${getItemWidth()}px`"
            @mousedown="onMouseDown({$event,col})"
          >
            {{ col.title }} ({{ col.positionIndex }})
          </li>
        </ul>
      </div>
    </div>
    <div>
      <h3>可选字段</h3>
      <ul>
        <li />
      </ul>
    </div>
  </div>
</template>

<script>
import { ITEM_WRAPPER_WIDTH, ITEM_WIDTH, ITEM_WRAPPER_HEIGHT, EXLUDE_COL_TYPE } from './config'
import clonedeep from 'clonedeep'
import { mouseMove } from './mixins'

export default {
  name: 'SetColumns',
  mixins: [mouseMove],
  props: {
    colData: {
      type: Array,
      default: () => { return [] }
    },
    /**
     * 一行显示数
     */
    oneLineNums: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      insideColData: []
    }
  },
  computed: {
    insideColDataMsg: function() {
      return this.insideColData.map(item => { return item.title + item.positionIndex })
    }
  },
  created() {
    this.insideColData = this.initDefaultInsideColData()
  },
  methods: {
    btnChange() {
      this.insideColData.forEach(item => {
        item.positionIndex++
      })
    },
    initDefaultInsideColData() {
      const colData = clonedeep(this.colData)
      const result = colData.filter(item => {
        return !EXLUDE_COL_TYPE.includes(item.type)
      })
      result.forEach((item, index) => {
        item.positionIndex = index
        item.dataIndex = index
      })
      return result
    },
    getItemLeft(index) {
      const oneLineNums = this.oneLineNums
      const _index = index % oneLineNums
      return ITEM_WRAPPER_WIDTH * _index
    },
    getItemTop(index) {
      const oneLineNums = this.oneLineNums
      const _index = Math.floor(index / oneLineNums)
      return ITEM_WRAPPER_HEIGHT * _index
    },
    getItemWidth() {
      return ITEM_WIDTH
    },
    getColDataByDataIndex(dataIndex) {
      const data = this.insideColData
      return data[Number(dataIndex)]
    },
    getColDataByPositionRangeIndex(min, max) {
      const data = this.insideColData
      const resultArray = data.filter(item => { return min <= item.positionIndex && item.positionIndex <= max })
      console.log('得到的范围item: ', resultArray.map(item => { return item.title }))
      return resultArray
    },
    getColDataByPositionIndex(positionIndex) {
      const data = this.insideColData
      const resultArray = data.filter(item => { return item.positionIndex === positionIndex })
      return resultArray[0]
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
 width: 700px; background: rgb(187, 208, 230);
}
  .col {
    position: relative; background: #f0dcdc;
    .active{ background: #409EFF; color: #ffffff; border: none; }
    .g_move{-webkit-transition: none;
      transition: none; z-index: 200}
    li {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      position: absolute;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      text-align: center;
      background: #f8f8f9; border-radius: 4px; border: #e2e2e2 1px solid;
      color: rgb(75, 75, 75); font-size: 12px; list-style: none;
      padding: 8px 10px; margin: 5px; cursor: move;
    }
  }
</style>
